<% include ./side.html %>
<style scoped>
	.com_top_title:after{
		content:'';
		display:block;
		clear:both;
	}
	table.table{
		background:#fff;
	}
	table.table .light_color th{
		font-weight:400;
	}
	table.table tr td{
		font-size:12px;
	}
</style>
<div class="com_content_body main pb100" id="pages" v-cloak>
	<div class="com_top_title">
		<h1 class="com_h1 fl">页面路径</h1>
		<commonsearch :done="getDataForTime"></commonsearch>
	</div>
	<div class="com_topic mb20 mt20"><span class="iconfont">&#xe63a;</span>统计某一路径的访问次数，可分城市、系统查询。</div>
	<div>
		<!-- 公共搜索条件 -->
		<div class="com_search">
			<div class="item">
				<div>
					<input class="inp w-200" v-model="url" placeholder="选填、输入path路径" type="text">
					<button class="btn btn-default" @click="searchForUrl">搜索</button>
				</div>
				<div class="ml30">
					<input id="zane-calendar-1" class="inp w-200" type="text" placeholder="选择日期查询">
				</div>
				<div class="com_select_item ml30" :class="{'active':isCity}" @click="isSelectCity"><span class="iconfont">&#xe63c;</span>按城市分类</div>
				<div class="ml10">
					<input class="inp w-100" v-model="city" placeholder="城市名字查询" type="text">
					<button class="btn btn-default" @click="searchForCity">搜索</button>
				</div>
				<div class="com_select_item ml30" :class="{'active':isBrand}" @click="isSelectBrand"><span class="iconfont">&#xe63c;</span>手机品牌</div>
				<div class="com_select_item ml30" :class="{'active':isModel}" @click="isSelectModel"><span class="iconfont">&#xe63c;</span>手机型号</div>
				<div class="com_select_item ml30" :class="{'active':isNet}" @click="isSelectNet"><span class="iconfont">&#xe63c;</span>网络类型</div>
				<div class="com_select_item ml30" :class="{'active':isSystem}" @click="isSelectSystem"><span class="iconfont">&#xe63c;</span>操作系统</div>
			</div>
			<div class="tipscolor mt10" v-if="errText">{{errText}}</div>
		</div>
		<div class="overflow_table">
			<!-- table列表 -->
			<table class="table" v-if="isLoadend&&listdata.length">
				<tr class="light_color">
					<th class="w-500">URL</th>
					<th>调用次数</th>
					<th v-if="isCity">城市</th>
					<th v-if="isBrand">手机品牌</th>
					<th v-if="isModel">手机型号</th>
					<th v-if="isNet">网络类型</th>
					<th v-if="isSystem">手机系统</th>
					<th>操作</th>
				</tr>
				<tr v-for="item in listdata">
					<td><a class="word-wrap" href="javascript:" @click="goToList(item)">{{item._id.url}}</a></td>
					<td class="tc" >{{item.count}}</td>
					<td class="tc" v-if="isCity">{{item._id.city||'未知'}}</td>
					<td class="tc" v-if="isBrand">{{item._id.brand}}</td>
					<td class="tc" v-if="isModel">{{item._id.model}}</td>
					<td class="tc" v-if="isNet">{{item._id.net}}</td>
					<td class="tc" v-if="isSystem">{{item._id.system}}</td>
					<td><a href="javascript:" @click="goToList(item)">详情</a></td>
				</tr>
			</table>
		</div>
	</div>
	<!--  分页 -->
	<div class="tc common_page_style mt10" v-show="isLoadend&&listdata.length">
		<div id="copot-page" class="copot-page"></div>
	</div>
	<!-- 暂无数据 -->
	<div class="tc mt20" v-if="!listdata.length">暂无数据!</div>
</div>

<script>
	new Vue({
		el: '#pages',
		data: function () {
			return {
				listdata: [],
				pageNo: 1,
				pageSize: 30,
				totalNum: 0,
				beginTime: '',
				endTime: '',
				isLoadend: false,
				appId: util.getStorage('local', 'appId'),
				type: util.getQueryString('type') || 1, //访问速度类型 1：正常  2：慢
				url:'',
				errText:'',
				city: '',
				isCity: false,
				isBrand: false,
				isSystem: false,
				isModel:false,
				isNet:false,
			}
		},
		filters: {
			toFixed: window.Filter.toFixed
		},
		mounted() {
			this.getDataForTime();
			this.searchForTime();
		},
		methods: {
			getDataForTime(){
				let times = util.getSearchTime()
				this.beginTime = times.beginTime
				this.endTime = times.endTime
				this.getinit();
			},
			getinit() {
				this.isLoadend = false;
				util.ajax({
					type:'get',
					url: config.baseApi + 'api/v1/wx/pages/getAveragePageList',
					data: {
						type:this.type,
						appId:this.appId,
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						beginTime: this.beginTime,
						endTime: this.endTime,
						url: this.url,
						city: this.city,
						isCity: this.isCity,
						isBrand: this.isBrand,
						isModel: this.isModel,
						isSystem: this.isSystem,
						isNet:this.isNet,
					},
					success: data => {
						this.isLoadend = true;
						if (!data.data.datalist && !data.data.datalist.length) return;
						this.listdata = data.data.datalist;
						new Page({
							parent: $("#copot-page"),
							nowPage: this.pageNo,
							pageSize: this.pageSize,
							totalCount: data.data.totalNum,
							callback: (nowPage, totalPage) => {
								this.pageNo = nowPage;
								this.getinit();
							}
						});
					}
				})
			},
			isSelectCity() {
				this.isCity = !this.isCity;
				if (!this.isCity) this.city = '';
				this.getinit();
			},
			isSelectBrand() {
				this.isBrand = !this.isBrand;
				this.getinit();
			},
			isSelectModel(){
				this.isModel = !this.isModel;
				this.getinit();
			},
			isSelectNet(){
				this.isNet = !this.isNet;
				this.getinit();
			},
			isSelectSystem() {
				this.isSystem = !this.isSystem;
				this.getinit();
			},
			searchForUrl() {
				this.getinit();
			},
			searchForCity() {
				this.isCity = this.city ? true : false;
				this.getinit();
			},
			searchForTime(){
				zaneDate({
					elem: '#zane-calendar-1',
					type: 'doubleday',
					format: 'yyyy/MM/dd',
					done: (fulltime, begintime, endtime) => {
						this.beginTime = begintime ? begintime + ' 00:00:00' : '';
						this.endTime = endtime ? endtime + ' 23:59:59' : '';
						this.errText = '';
						let beginstrap = new Date(`${this.beginTime}`).getTime();
						let endstrap = new Date(`${this.endTime}`).getTime();
						let between = endstrap - beginstrap;
						if (between < 0) {
							this.errText = "结束时间不能小于开始时间。";
							return false;
						}
						if (between > 259200000) {
							this.errText = "时间粒度选择只支持3天以内的时间段查询。";
							return false;
						}
						this.getinit();
					},
				});
			},
			goToList(item) {
				util.setStorage('session', 'pagesItemData', JSON.stringify(item))
				location.href = "/wx/pageslist"
			}
		}
	})
</script>